<template>
	<view class="y-flex" @tap="handleTap">
		<find-image v-if="item.cover" class="y-flex-1" lazy-load :style="{
			'height': _pixelunit(cellImageHeight)
		}" :border-radius="cellImageBorderRadius" :src="item.cover" mode="aspectFill" :tip-size="cellImageTipSize"></find-image>
		<empty-image v-else class="y-flex-1" :style="{
			'height': _pixelunit(cellImageHeight)
		}" :border-radius="cellImageBorderRadius" :size="cellImageTipSize"></empty-image>
		<com-text v-if="item.title" :lines="cellTitleLines" size="30" class="mt-10" :color="titleColor" :value="item.title"></com-text>
		<text v-if="item.subtitle" class="fs-24 lines-1 mt-10" :style="{color: textColor}">{{item.subtitle}}</text>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	import EmptyImage from '../EmptyImage.vue'
	import FindImage from '../Image.vue'
	export default {
		inject: ['getSkinColor', 'navigate'],
		components: {
			EmptyImage,
			FindImage
		},
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			cellImageHeight () {
				return this.options.cellImageHeight || 240
			},
			cellImageBorderRadius () {
				return this.options.cellImageBorderRadius || 10
			},
			cellImageTipSize () {
				return this.options.cellImageTipSize || 20
			},
			cellTitleLines () {
				return this.options.cellTitleLines || 1
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			handleTap () {
				this.navigate(this.item.url)
			}
		}
	}
</script>

<style>
</style>